<template>
    <div class="spcv_conversation-view undefined">
        <div class="spcv_conversation-header">
            <div class="spcv_info">
                <div class="spcv_headers spcv_reversed spcv_singleTab">
                    <button class="spcv_tabButton">
                        <span class="Button__contentWrapper--11-5-3">
                            <h2 class="spcv_header-text">Conversation
                                <span class="spcv_commentsCounter">
                                    18 Comments
                                </span>
                            </h2>
                        </span>
                    </button>
                </div>
                <!-- 左边 -->
                <div class="spcv_viewing-indicator">
                    <img src="../../../assets/team.png">
                    <span class="Typography__vi">19 Viewing</span>
                </div>
                <!-- 右边 -->
            </div>
            <h3 role="presentation" class="spcv_subheader-container">
                <span>
                    <p>
                        <a style="color:#7b7f83" class="com">COMMUNITY GUIDELINES</a>
                        <span style="color:#7b7f83">•</span>
                        <a style="color:#7b7f83" class="com">FAQS</a>
                        <span style="color:#7b7f83">&#xFEFF;</span>
                    </p>
                </span>
            </h3>
            <div class="spcv_conversation">
                <div class="name">he xf</div>
                <div class="setting">
                    <div class="alarm">
                        <el-tooltip class="box-item" effect="dark" content="Nofitication" placement="top-start">
                            <el-icon>
                                <Bell />
                            </el-icon>
                        </el-tooltip>
                    </div>
                    <div class="alarm">
                        <el-tooltip class="box-item" effect="dark" content="Settings" placement="top-start">
                            <el-icon>
                                <Setting />
                            </el-icon>
                        </el-tooltip>

                    </div>
                </div>
            </div>
            <div class="spcv_editor-wrapper">
                <!-- <div class="edit-cont" v-if="clickInput" @click="clickInput != clickInput">
                    <span @click="clickInput != clickInput">What do you think?</span>
                </div> -->
                <el-input :class="[clickInput ? 'heighmin' : 'heighmax']" v-model="youthink"
                    placeholder="What do you think?" @click="clickInput = !clickInput" />
                <div class="send-btn" v-if="!clickInput">
                    <button class="btn">Send</button>
                </div>
            </div>
        </div>
        <div class="spcv_sort-container" v-if="noComment">
            <span class="spcv_sort-by-text">Sort by&nbsp;</span>
            <div class="menulist">
                <span class="spcv_sort-by-value" @click="showList">Best</span>
                <el-icon @click="showList">
                    <ArrowDown />
                </el-icon>
                <ul class="bylist" v-if="isShow">
                    <li>Best<el-icon><Select /></el-icon></li>
                    <li>Newest</li>
                    <li>Oldest</li>
                </ul>
            </div>
        </div>
        <!-- 评论区 -->
        <div class="components-MessageLayout-index__messageWrapper" v-if="noComment">
            <div class="wrap-cont">
                <div class="wrap-head">
                    <span>William Guenthner</span>
                    <div class="tip">
                        <el-icon>
                            <MoreFilled />
                        </el-icon>
                    </div>
                </div>
                <time class="time">1 day ago</time>
                <p class="cont">Charts don't foretell the future.</p>
                <div class="reshart">
                    <div class="reply">Reply</div>
                    <span class="circle"></span>
                </div>
            </div>
        </div>
        <div class="spcv_emptyStackLayout" v-else>
            <div class="empty">
                <div class="chat">
                    <el-icon>
                        <ChatRound />
                    </el-icon>
                </div>
            </div>
            <p class="chat-text">No one seems to have shared their thoughts on this topic yet</p>
            <p class="chat-text secord-text">Leave a comment so your voice will be heard first.</p>
        </div>
    </div>
</template>
<script setup>
const isShow = ref(false)
const noComment = ref(false)
const clickInput = ref(true)
const youthink = ref('')
const showList = () => {
    isShow.value = !isShow.value
}
</script>
<style scoped lang='scss'>
.heighmin {
    :deep(.el-input__wrapper) {
        height: 40px;
    }
}

.heighmax {
    :deep(.el-input__wrapper) {
        height: 90px;
    }
}

@import '../aboutAuthor/aboutAuthor.css'
</style>